<template>
	<view class="setting-box">
		<view>
			<image src="/static/icon/left.png" class="left-icon" @click="backToLast"></image>
		</view>
		<!-- 信息展示 -->
		<view class="top-box">
			<view class="avatar-box">
				<image src="/static/img/avatar.png" class="avatar-style" alt="avatar"></image>
			</view>
			<view class="info-box">
				<view class="name-style">Baby Three</view>
				<view class="name-style">ID 12345678</view>
			</view>
			<view>
				<view class="qrcode-box">
					<image src="/static/icon/qrcode.png" class="icon-style" alt="icon"></image>
				</view>
				<view class="edit-box">
					<image src="/static/icon/edit.png" class="icon-style" alt="icon"></image>
				</view>
			</view>
		</view>
		<!-- 折叠面板 -->
		<view>
			<up-collapse style="background-color: #fff;" accordion>
				<up-collapse-item :title="$t('setting.list.item1')" name="Docs guide">
					<view class="collapse-item-row">{{$t('setting.list.item1-1')}}</view>
					<view class="collapse-item-row" style="padding: 0.2rem;">{{$t('setting.list.item1-2')}}</view>
					<view class="collapse-item-row-last">{{$t('setting.list.item1-3')}}</view>
				</up-collapse-item>
				<up-collapse-item :title="$t('setting.list.item2')" name="Docs guide">

				</up-collapse-item>
				<up-collapse-item :title="$t('setting.list.item3')" name="Docs guide">
					<view class="collapse-item-row">{{$t('setting.list.item3-1')}}</view>
					<view class="collapse-item-row" style="padding: 0.2rem;">{{$t('setting.list.item3-2')}}</view>
					<view class="collapse-item-row-last">{{$t('setting.list.item3-3')}}</view>
				</up-collapse-item>
				<up-collapse-item :title="$t('setting.list.item4')" name="Docs guide">
					<view class="collapse-item-row" style="padding: 0.2rem;">{{$t('setting.list.item4-1')}}</view>
					<view class="collapse-item-row-last">{{$t('setting.list.item4-2')}}</view>
				</up-collapse-item>
			</up-collapse>
		</view>
		
		<!-- 按钮 -->
		<view class="btn-box">
			<button class="btn-style">{{$t('setting.btn1')}}</button>
			<button class="btn-style">{{$t('setting.btn2')}}</button>
		</view>
	</view>

</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const backToLast = ()=>{
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.setting-box {
		width: 100%;
		height: 100%;
		/*微信小程序无法使用本地资源图片作为背景图 使用base64格式*/
		background-image: url('');
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 2rem 0;
		/* #ifdef  MP-WEIXIN*/
			padding-top: 3.5rem;
		/* #endif*/
	}
	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin: -3rem 0 0 0.5rem;
		/* #ifdef  MP-WEIXIN*/
			margin: 0rem 0 0 0.5rem;
		/* #endif*/
	}
	.top-box {
		// width: 24.56rem;
		height: 9.5rem;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
		display: flex;
		position: relative;
	}

	.avatar-box {
		margin-left: 1.13rem;
	}

	.avatar-style {
		width: 6.25rem;
		height: 6.25rem;
	}

	.info-box {
		margin: 0.81rem 0 0 1.5rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.88rem;
		font-weight: 600;
		text-align: left;
	}

	.name-style {
		height: 1.88rem;
		line-height: 1.88rem;
		margin-bottom: 0.5rem;
	}

	.icon-style {
		width: 1.5rem;
		height: 1.5rem;
	}

	.qrcode-box {
		position: absolute;
		top: 1rem;
		right: 0.81rem;
	}

	.edit-box {
		position: absolute;
		bottom: 0.95rem;
		right: 0.81rem;
	}
	.collapse-item-row{
		padding:0 0.2rem;
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		border-bottom: 1px solid #eee;
	}
	.collapse-item-row-last{
		padding:0 0.2rem;
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
	}
	
	.btn-box{
		display: flex;
		position: absolute;
		bottom: 1rem;
		left: 1%;
		right:1% ;
	}
	.btn-style{
		width: 10.69rem;
		height: 2.56rem;
		line-height: 2.56rem;
		border-radius: 0.25rem;
		background-color: rgba(164,173,179,1);
		color: rgba(255,255,255,1);
		font-size: 0.88rem;
		text-align: center;
	}
</style>